<template>
	<!-- 绑定触摸事件：事件（tap）、事件绑定(@)、事件处理函数：editUsername -->
	<view @tap="editUsername">
		<view class="">姓名：{{student}}</view>
		<view class="">
			<image :src="avatar" mode=""></image>
		</view>
		<view class="">性别：{{gender}}</view>
		<view class="">年龄：{{age}}</view>
		<view class="">班级：{{class}}</view>
	</view>
	<hr />
	<uni-section title="只选择图片" type="line">
		<view class="example-body">
			<uni-file-picker limit="9" title="最多选择9张图片"></uni-file-picker>
		</view>
	</uni-section>
	<hr />
	<view class="">
		<view class="name">
			姓名：{{student1.name}}
		</view>
		<view class="gender">
			性别：{{genderArr[student1.gender]}}
		</view>
		<view class="age">
			年龄：{{student1.age}}
		</view>
		<view class="avatar">
			<image :src="student1.avatar" mode=""></image>
		</view>
	</view>
</template>

<script>
	export default {
		// 数据一定要放在data里面
		data() {
			return {
				// 所有的数据都要放在这里：才具备响应性特征
				genderArr: ['保密', '男', '女'],
				student1: {
					name: '周博林',
					age: 22,
					gender: 1,
					avatar: 'https://img0.baidu.com/it/u=1096585807,3493972554&fm=253&app=138&f=JPEG?w=500&h=500'
				},

				student: '杨凯100',
				age: 20,
				gender: '帅哥',
				class: 'AI250301',
				avatar: 'https://miaobi-lite.bj.bcebos.com/miaobi/5mao/b%276Jyh56yU5bCP5paw5oOF5L6j5aS05YOPXzE3Mjg5NDgyODguMjQ1MjcyMg%3D%3D%27/0.png'
			}
		},
		// 事件处理函数一定要在methods里面定义
		methods: {
			editUsername() {
				// 修改数据：this和python里面的self是一个东西
				this.student = '管福源'
				this.age = 21
				this.gender = '男生'
				this.avatar =
					'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fci.xiaohongshu.com%2F9c206149-6881-5b9c-ed4e-59856c257793%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fci.xiaohongshu.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1758764464&t=49d4b9ffee43563538bff272a4ca4970'
			}
		}
	}
</script>

<style>
	.example-body {
		padding: 10px;
		padding-top: 0;
	}

	.custom-image-box {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	.text {
		font-size: 14px;
		color: #333;
	}
</style>